<template>
    <div>
        <el-alert title="提示：充值金额不支持退款，请理性充值。企业内所有成员购买或续费设备时可共享余额账户" type="info" show-icon  style="background-color: var(--main-blue);color: white;"/>
        <div class="title_box">
            <el-icon><Money /></el-icon>
            <span>账户概况</span>
            <span>兑换中心</span>
        </div>
        <div class="account_box">
            <div class="account_left">
                <p>账户余额（元）</p>
                <p>0.00</p>
                <p>
                    <span>刷新</span>
                    <span>告警设置</span>
                </p>
            </div>
            <div class="account_right">
                <p>优惠券（张）</p>
                <p>2</p>
                <p>详情</p>
            </div>
        </div>
        <div class="button_box">
            <el-text class="mx-1">充值金额：</el-text>
            <el-button v-for="( item ,index ) in buttonList" :key="index" :type="item.type" @click="clickButton(item)">{{item.amount}}</el-button>
            <div style="width:55px;margin-left:10px;">
            <el-input v-model="selfAmount" />
            </div>
        </div>
        <div class="button_box">
            <el-text class="mx-1">支付方式：</el-text>
            <div class="pay_card" 
            :class="{ selected: selectedPayment === 'alipay' }" 
            @click="selectPayment('alipay')">
             <img src="../../../assets/alipay.png" alt="">
            </div>
            <div class="pay_card"
            :class="{ selected: selectedPayment === 'wechatpay' }" 
            @click="selectPayment('wechatpay')"
            >
              <img src="../../../assets/微信支付.png" alt="">
            </div>
        </div>
        <div>
            <el-button type="primary">立即充值</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref ,onMounted } from 'vue'
    let selectedPayment = ref('')
    const buttonList = ref(
        [
            {amount:100,type:'none'},
            {amount:300,type:'none'},
            {amount:500,type:'none'},
            {amount:800,type:'none'},
            {amount:1000,type:'none'},
        ]
    )
    const selfAmount = ref(0)

    const clickButton = (buttonItem) => {
        buttonList.value.forEach(item=> {
            item.type = 'none'
        })
        buttonItem.type = 'primary'
    }
    onMounted( ( ) => {
        buttonList.value[0].type = 'primary'
    })
    const selectPayment = (paymentMethod) => {

    if (selectedPayment.value === paymentMethod) {

        selectedPayment.value = null;

      } else {

        selectedPayment.value = paymentMethod;

      }
    }
</script>
<style lang="less" scoped>
.title_box {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.title_box span:nth-child(3) {
    color: gray;
    font-size: small;
    margin-left: 5px;

}
.account_box{
    display: flex;
    margin-top: 10px;
}
.account_left ,.account_right {
    width: 300px;
    height: 150px;
    border-radius: 5px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.account_left {
    background-color: rgb(216.8, 235.6, 255);
}
.account_left p:nth-child(odd) {
    color: gray;
    font-size: small;
    cursor: pointer;
}
.account_left p span:nth-child(2) {
    margin-left: 5px;
}
.account_right p:nth-child(odd){
    color: gray;
    font-size: small;
    cursor: pointer;
}

.account_right p:nth-child(even){
    font-size: x-large;
}
.account_left p:nth-child(even){
    font-size: x-large;
}

.account_right{
    background-color: rgb(252, 210.9, 210.9);
    margin-left: 30px;
}
.button_box{
    margin: 10px 0;
    display: flex;
}
.button_box img{
    width: 100px;
    height: 30px;
}
.pay_card{
    background: rgb(243.9, 244.2, 244.8);
    padding: 10px;
    margin-left: 10px;
    border-radius: 10px;
}
.pay_card:nth-child(2){
    margin-left: 10px;
}
.pay_card.selected {
  background-color: rgb(235.9, 245.3, 255); /* 选中时的背景色 */
}

</style>